<template>
  <div class="sales-ranking bg-c-base">
    <h1>地区商家故障警号</h1>
    <div class="chart-sales">
      <v-chart :options="options" ref="chart"></v-chart>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { reactive, onUnmounted, onMounted, getCurrentInstance} from 'vue';
import data from '@/utils/420000_full';
import { clearInterval } from 'timers';
export default {
	name : 'SalesRanking',
	setup () {
		let options = reactive({});
		let dom = null;
		// 绘制地图板块
		echarts.registerMap('hubei', data);
		var center = {};
		data.features.forEach((item) => {
			center[item.properties.name] = item.properties.center;
		});
		console.log(center);
		options = {
			visualMap : {
				top : 0,
				min : 0,
				max : 100,
				text : ['High', 'Low'],
				realtime : true,
				calculable : true,
				seriesIndex : [3], //指定取哪个系列的数据
				inRange : {
					color : ['#A5DCF4', '#006edd'], // 板块颜色渐变
				},
			},
			geo : [
				{
					map : 'hubei',
					top : 50,
					zoom : 1.1, //默认显示级别
					scaleLimit : {
						//缩放级别
						min : 0,
						max : 3,
					},
					itemStyle : {
						normal : {
							areaColor : '#013C62',
							shadowColor : '#013C62',
							shadowBlur : 20,
							shadowOffsetX : -5,
							shadowOffsetY : 15,
						},
					},
				},
			],
			series : [
				{
					type : 'effectScatter',
					coordinateSystem : 'geo',
					data : [],
					symbolSize : 30,
					label : {
						normal : {
							show : true,
							formatter : function (params) {
								return (
									'{fline|地点：' +
                  params.data.city +
                  '}\n{tline|' +
                  (params.data.info || '发生xx集件') +
                  '}'
								);
							},
							position : 'top',
							backgroundColor : 'rgba(254,174,33,.8)',
							padding : [10, 10],
							borderRadius : 3,
							lineHeight : 32,
							color : '#f7fafb',
							rich : {
								fline : {
									fontSize : 30,
									padding : [0, 10, 10, 10],
									color : '#fff',
								},
								tline : {
									fontSize : 30,
									padding : [10, 10, 0, 10],
									color : '#fff',
								},
							},
						},
						emphasis : {
							show : true,
						},
					},
					itemStyle : {
						color : '#feae21',
					},
				},
				{
					type : 'effectScatter',
					coordinateSystem : 'geo',
					data : [],
					symbolSize : 30,
					label : {
						normal : {
							show : true,
							formatter : function (params) {
								return (
									'{fline|地点：' +
                  params.data.city +
                  '}\n{tline|' +
                  (params.data.info || '发生xx集件') +
                  '}'
								);
							},
							position : 'top',
							backgroundColor : 'rgba(233,63,66,.9)',
							padding : [10, 10],
							borderRadius : 3,
							lineHeight : 32,
							color : '#ffffff',
							rich : {
								fline : {
									fontSize : 30,
									padding : [0, 10, 10, 10],
									color : '#ffffff',
								},
								tline : {
									fontSize : 30,
									padding : [10, 10, 0, 10],
									color : '#ffffff',
								},
							},
						},
						emphasis : {
							show : true,
						},
					},
					itemStyle : {
						color : '#e93f42',
					},
				},
				{
					type : 'effectScatter',
					coordinateSystem : 'geo',
					data : [],
					symbolSize : 30,
					label : {
						normal : {
							show : true,
							formatter : function (params) {
								return (
									'{fline|地点：' +
                  params.data.city +
                  '}\n{tline|' +
                  (params.data.info || '发生xx集件') +
                  '}'
								);
							},
							position : 'top',
							backgroundColor : 'rgba(8,186,236,.9)',
							padding : [10, 10],
							borderRadius : 3,
							lineHeight : 32,
							color : '#ffffff',
							rich : {
								fline : {
									fontSize : 30,
									padding : [0, 10, 10, 10],
									color : '#ffffff',
								},
								tline : {
									fontSize : 30,
									padding : [10, 10, 0, 10],
									color : '#ffffff',
								},
							},
						},
						emphasis : {
							show : true,
						},
					},
					itemStyle : {
						color : '#08baec',
					},
				},
				{
					type : 'map',
					top : 50,
					mapType : 'hubei',
					geoIndex : -1,
					zoom : 1.1, //默认显示级别
					label : {
						fontSize : 30,
						// 地图板块文字默认样式
						show : true,
						color : '#ffffff',
						emphasis : {
							//地图板块文字hover 样式
							color : 'red',
							show : true,
						},
					},
					itemStyle : {
						normal : {
							// 地图板块默认样式
							borderColor : '#2980b9',
							borderWidth : 1,
							areaColor : '#12235c',
						},
						emphasis : {
							//地图板块hover 样式
							areaColor : '#FA8C16',
							borderWidth : 0,
							color : 'green',
						},
					},
					// 绘制地图
					data : Object.keys(center).map((name) => {
						return {
							name : name,
							value : Math.random() * 100,
						};
					}),
				},
			],
		};
		var timer = setInterval(() => {
			const _options = { ...options };
			for (var i = 0; i < 3; i++) {
				// 清空之前的闪点
				_options.series[i].data = [];
			}
			// 随机取闪点的市
			var cityIndex = Math.floor(Math.random() * 17);
			// 随机取闪点样式
			var runidx = Math.floor(Math.random() * 3);
			// 获取地区名字
			var coordCity = Object.keys(center)[cityIndex];
			// 获取地区经纬度
			var coord = center[coordCity];
			_options.series[runidx].data = [
				{
					city : coordCity,
					value : coord,
				},
			];
			options = _options;
			dom.init();
		}, 3000);

		onMounted(()=>{
			 dom = getCurrentInstance().ctx.$refs['chart'];

		});

		onUnmounted(() => {
			clearInterval(timer);
		});

		return {
			options,
		};
	},
};
</script>

<style lang="scss" scoped>
.sales-ranking {
  padding: 20px;
  height: 1000px;
  box-sizing: border-box;
  margin-top: 20px;
}
.chart-sales{
  height: 650px;
}
</style>
